<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="/webJava/scriptjs/httprequest.js"></script>
<script type="text/javascript">
	function load(url) {
		sendRequest(url, null, ViewAjax, 'GET');
	}
	function loadEx(url) {
		sendRequest(url, null, MessageView, 'GET');
	}
	function loadExx(url) {
		sendRequest(url, null, ViewOl, 'GET');
	}
	//callback
	function ViewOl() {
		if (httpReqeust.status == 200) {
			printInfoExx();
		}
	}
	function printInfoExx() {
		var xmlData = httpReqeust.responseXML;
		enter = xmlData.getElementsByTagName("board");
		array = new Array(6);
		for (var i = 0; i < enter.length; i++) {//boardCount
			var cnt = 0;
			var enterChilds = enter[i].childNodes;
			for (var j = 0; j < enterChilds.length; j++) {
				xmlNode = enterChilds[j].firstChild;
				if (xmlNode && typeof (xmlNode) != "undefined") {
					array[cnt++] = xmlNode.nodeValue;
				}
			}
			insertRowExx(array);
		}
	}
	function insertRowExx(array) {
		var obj = document.getElementById("dv3");
		var show = document.getElementById("show3");
		var obj_row = document.createElement("li");
		var arrayTd = new Array(6);
		for (var i = 0; i < arrayTd.length; i++) {
			if(i==1){
				obj_row.innerHTML = "<img src="+array[i]+" width=50  height=50 >&nbsp;&nbsp;&nbsp;";
			}else{
				obj_row.innerHTML+= array[i]+"&nbsp;&nbsp;&nbsp;";
			}
		}
		show.appendChild(obj_row);
		obj.style.display = 'inline';
	}

	//callback
	function MessageView() {
		if (httpReqeust.status == 200) {
			printInfoEx();
		}
	}
	function printInfoEx() {

		var xmlData = httpReqeust.responseXML;
		enter = xmlData.getElementsByTagName("board");
		array = new Array(6);
		for (var i = 0; i < enter.length; i++) {//boardCount
			var cnt = 0;
			var enterChilds = enter[i].childNodes;
			for (var j = 0; j < enterChilds.length; j++) {
				xmlNode = enterChilds[j].firstChild;
				if (xmlNode && typeof (xmlNode) != "undefined") {
					array[cnt++] = xmlNode.nodeValue;
				}
			}
			insertRowEx(array);
		}
	}
	function insertRowEx(array) {
		var obj = document.getElementById("dv2");
		var show = document.getElementById("show2");
		var obj_row = document.createElement("tr");
		var arrayTd = new Array(6);
		for (var i = 0; i < arrayTd.length; i++) {
			arrayTd[i] = document.createElement("td");
			obj_row.appendChild(arrayTd[i]);
			if (i == 1) {
				arrayTd[i].innerHTML = "<img src="+array[i]+" width=50  height=50 >";
			} else {
				arrayTd[i].innerHTML = array[i];
			}
		}
		show.appendChild(obj_row);
		obj.style.display = 'inline';
	}

	//callback
	function ViewAjax() {
		if (httpReqeust.status == 200) {// httpReqeust.readystate==4 && 
			printInfo();
		}
	}
	function printInfo() {

		var xmlData = httpReqeust.responseXML;
		enter = xmlData.getElementsByTagName("board");
		array = new Array(6);
		for (var i = 0; i < enter.length; i++) {//boardCount
			var cnt = 0;
			var enterChilds = enter[i].childNodes;
			for (var j = 0; j < enterChilds.length; j++) {
				xmlNode = enterChilds[j].firstChild;
				if (xmlNode && typeof (xmlNode) != "undefined") {
					array[cnt++] = xmlNode.nodeValue;
				}
			}
			insertRow(array);
		}
	}
	function insertRow(array) {
		var obj = document.getElementById("dv");
		var show = document.getElementById("show");
		var obj_row = document.createElement("tr");
		var arrayTd = new Array(6);
		for (var i = 0; i < arrayTd.length; i++) {
			arrayTd[i] = document.createElement("td");
			obj_row.appendChild(arrayTd[i]);
			if (i == 1) {
				arrayTd[i].innerHTML = "<img src="+array[i]+" width=50  height=50  onClick=sendImageData('/webJava/ajaxData/aData7.jsp','data="+array[i]+"')>";
			} else {
				arrayTd[i].innerHTML = array[i];
			}
		}
		show.appendChild(obj_row);
		if(show.childNodes.length>5){
			show.removeChild(obj_row);
		}
		obj.style.display = 'inline';
	}
	
	function sendImageData(url,data) {
		sendRequest(url,data,viewImage,'GET');
	}
	function viewImage() {
		if(httpReqeust.status==200){
			var obj=document.getElementById('imgShow');
			obj.innerHTML=httpReqeust.responseText;
		}
	}
</script>
</head>
<body>
	<center>
		<img alt="" src="/webJava/imgEx/1.jpg" width="100" height="100"	onclick="onload=load('/webJava/ajaxData/aData6.xml')"> 
		<img alt="" src="/webJava/imgEx/2.jpg" width="100" height="100"	onclick="onload=loadEx('/webJava/ajaxData/aData6.xml')"> 
		<img alt="" src="/webJava/imgEx/3.jpg" width="100" height="100"	onclick="onload=loadExx('/webJava/ajaxData/aData6.xml')"> 
		<img alt="" src="/webJava/imgEx/4.jpg" width="100" height="100">
		<img alt="" src="/webJava/imgEx/5.jpg" width="100" height="100">
		<img alt="" src="/webJava/imgEx/6.jpg" width="100" height="100">
	</center>
	<div id="dv" style="display: none">
		<table width="70%" border="5" bordercolor="gray" id="show"
			align="center">
			<tr align="center">
				<td><b><font color="black">NO</font><b></td>
				<td><b><font color="black">IMAGE</font><b></td>
				<td><b><font color="black">TITLE</font><b></td>
				<td><b><font color="black">WRITER</font><b></td>
				<td><b><font color="black">HIT</font></b></td>
				<td><b><font color="black">REGDATE</font></b></td>
			</tr>
		</table>
	</div>
	<div id="dv2" style="display: none">
		<table width="70%" border="5" bordercolor="gray" id="show2"
			align="center">
			<tr align="center">
				<td><b><font color="black">NO</font><b></td>
				<td><b><font color="black">IMAGE</font><b></td>
				<td><b><font color="black">TITLE</font><b></td>
				<td><b><font color="black">WRITER</font><b></td>
				<td><b><font color="black">HIT</font></b></td>
				<td><b><font color="black">REGDATE</font></b></td>
			</tr>
		</table>
	</div>

	<div id="dv3" style="display: inline">
		<ol id="show3">
		</ol>
	</div>
	
	<div id="imgShow" align="center">
	</div>
</body>
</html>